/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div>
      <div class="fixed-bar">
        <div class="item-title">
          <router-link class="back" :to="{name:'store_msg_tpl'}" title="返回列表">
            <i class="fa fa-arrow-circle-o-left"></i>
          </router-link>
          <div class="subject">
            <h3>消息通知 - 编辑消息模板“商品违规被下架”</h3>
            <h5>商城对商家及用户消息类发送设定</h5>
          </div>
        </div>
      </div>
      <div
        id="explanation"
        class="explanation"
        style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
      >
        <div class="bckopa-tips">
          <div class="title">
            <img src="@/static/images/handd.png" alt />
            <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
          </div>
          <ul>
            <li>平台可给商家提供站内信、手机短信、邮件三种通知方式。平台可以选择开启一种或多种通知方式供商家选择。</li>
            <li>开启强制接收后，商家不能取消该方式通知的接收。</li>
            <li>短消息、邮件需要商家设置正确号码后才能正常接收。</li>
          </ul>
        </div>
        <span title="收起提示" id="explanationZoom" style="display: block;"></span>
      </div>
      <div class="ftitle">
        <h3 style="font-size: 15px;">消息模板切换选择</h3>
        <ul class="tab-base nc-row" style="margin: -20px 0px 20px 140px;">
          <li>
            <a href="javascript:void(0);" @click="type = 1" :class="{'current':type == 1}">站内信模板</a>
          </li>
          <li>
            <a href="javascript:void(0);" @click="type = 2" :class="{'current':type == 2}">手机短信模板</a>
          </li>
          <li>
            <a href="javascript:void(0);" @click="type = 3" :class="{'current':type == 3}">邮件模板</a>
          </li>
        </ul>
      </div>
      <el-form :model="form" label-width="150px">
        <el-form-item label="模板名称" required>
          <el-input v-model="form.smt_name" size="mini"></el-input>
          <p class="err-msg" v-if="errResult.smt_name && !form.smt_name">{{errResult.smt_name}}</p>
        </el-form-item>
        <el-form-item label="模板编号" required>
          <span>{{form.smt_code}}</span>
        </el-form-item>
        <div v-if="type == 1">
          <el-form-item label="站内信开关">
            <el-switch v-model="form.smt_message_switch" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="强制接收">
            <el-switch v-model="form.smt_message_forced" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="消息内容" required>
            <el-input
              type="textarea"
              v-model="form.smt_message_content"
              style="width:400px"
              size="mini"
            ></el-input>
            <p
              class="err-msg"
              v-if="errResult.smt_message_content && !form.smt_message_content"
            >{{errResult.smt_message_content}}</p>
          </el-form-item>
        </div>
        <div v-if="type == 2">
          <el-form-item label="手机短信开关">
            <el-switch v-model="form.smt_short_switch" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="强制接收">
            <el-switch v-model="form.smt_short_forced" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="短信签名" required>
            <el-input v-model="form.smt_short_sign" size="mini"></el-input>
            <p
              class="err-msg"
              v-if="errResult.smt_short_sign && !form.smt_short_sign"
            >{{errResult.smt_short_sign}}</p>
          </el-form-item>
          <el-form-item label="短信模板ID" required>
            <el-input v-model="form.smt_short_code" size="mini"></el-input>
            <p
              class="err-msg"
              v-if="errResult.smt_short_code && !form.smt_short_code"
            >{{errResult.smt_short_code}}</p>
          </el-form-item>
          <el-form-item label="消息内容" required>
            <el-input
              type="textarea"
              v-model="form.smt_short_content"
              style="width:400px"
              size="mini"
            ></el-input>
            <p
              class="err-msg"
              v-if="errResult.smt_short_content && !form.smt_short_content"
            >{{errResult.smt_short_content}}</p>
          </el-form-item>
        </div>
        <div v-show="type == 3">
          <el-form-item label="邮件开关">
            <el-switch v-model="form.smt_mail_switch" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="强制接收">
            <el-switch v-model="form.smt_mail_forced" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="邮件标题" required>
            <el-input v-model="form.smt_mail_subject" size="mini"></el-input>
            <p
              class="err-msg"
              v-if="errResult.smt_mail_subject && !form.smt_mail_subject"
            >{{errResult.smt_mail_subject}}</p>
          </el-form-item>
          <el-form-item label="邮件内容" required>
            <Ueditor :value="ueditor.value" :config="ueditor.config" ref="ue" v-if="ueditor.isShow"></Ueditor>
            <p
              class="err-msg"
              v-if="errResult.smt_mail_content && $refs.ue.getUEContent() == ''"
            >{{errResult.smt_mail_content}}</p>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()" :loading="isLoading">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Ueditor from "@/components/ueditor/index";
export default {
  data() {
    return {
      id: null,
      form: {},
      ueditor: {
        isShow: false,
        value: "",
        config: {
          serverUrl: this.apiHead + "/mall/ueditor/config?path=msgTpl",
          zIndex: 999,
          initialFrameWidth: "60%", //初化宽度
          initialFrameHeight: 250, //初化高度
          focus: false, //初始化时，是否让编辑器获得焦点true或false
          maximumWords: 99999,
          removeFormatAttributes:
            "class,style,lang,width,height,align,hspace,valign", //允许的最大字符数 'fullscreen',
          pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
          autoHeightEnabled: true
        }
      },
      sendScene: [],
      type: 1,
      errResult: {},
      isLoading: false
    };
  },
  components: {
    Ueditor
  },
  created() {
    this.getStoreMsgTpl();
  },
  methods: {
    getStoreMsgTpl() {
      var that = this;
      this.request
        .get("seller/store_msg_tpl?smt_code=" + this.$route.params.smt_code)
        .then(function(res) {
          that.form = res;
          that.ueditor.value = res.smt_mail_content;
          that.ueditor.isShow = true;
        });
    },
    onSubmit() {
      this.isLoading = true;
      var that = this;
      this.form.smt_mail_content = this.$refs.ue.getUEContent();
      this.request.put("/seller/store_msg_tpl", that.form).then(function(res) {
        if (res.status == 1) {
          that.$message.success("保存成功");
          that.$router.push({
            name: "store_msg_tpl"
          });
        } else if (res.status == -1) {
          that.$message.error("参数错误");
          that.errResult = res.result;
        } else {
          that.$message.error(res.msg);
        }
        that.isLoading = false;
      });
    }
  }
};
</script>

<style scoped>
ul li a {
  font-size: 15px;
}

>>> .el-input__inner {
  width: 300px;
}
</style>
